<template>
  <div class="wrap">
    <el-card class="box-card">
        <div slot="header" class="clearfix"> <span>基本信息</span> </div>
        <div class="card-body">
          <Avatar />
        <el-form  ref="form" :model="form" label-width="100px"  style="width: 60%"
        >
          <el-form-item label="用户昵称">
            <el-input
              v-model="form.name"
              placeholder="请输入用户昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户生日">
            <el-date-picker
              type="date"
              placeholder="请选择您的生日"
              v-model="form.date1"
              style="width: 50%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-radio-group v-model="form.resource">
              <el-radio label="女"></el-radio>
              <el-radio label="男"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存修改</el-button>
          </el-form-item>
        </el-form>
        </div>
      </el-card>
  </div>
</template>
<script>
import Avatar from '@/news/views/Settings/Profile/Avatar'
export default {
  name: "Profile",
  components: {Avatar},
  data() {
    return {
      form: {
        name: "",
        resource: "",
        date1: "",
        desc: "",
      },
    };
  },
  created() {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style lang="scss" scoped >
.card-body{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
</style>
